<!-- 添加商品 -->
<template>
  <div class="addProduct">
    <header class="header">
      <p class="title">首页 / 商品 / 添加商品</p>
    </header>
    <section class="addProduct_content">
      <div class="stepbar">
        <el-steps :active="0" align-center>
          <el-step title="填写商品信息" description="" />
          <el-step title="填写商品促销" description="" />
          <el-step title="填写商品属性" description="" />
          <el-step title="选择商品关联" description="" />
        </el-steps>
      </div>
      <div class="addFrom">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          size="default"
        >
          <el-form-item label="商品分类" prop="region">
            <el-select placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称" prop="name">
            <el-input />
          </el-form-item>
          <el-form-item label="副标题" prop="name">
            <el-input />
          </el-form-item>
          <el-form-item label="商品品牌" prop="region">
            <el-select placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品介绍" prop="desc">
            <el-input type="textarea" />
          </el-form-item>
          <el-form-item label="商品货号：">
            <el-input />
          </el-form-item>
          <el-form-item label="商品售价：">
            <el-input />
          </el-form-item>
          <el-form-item label="市场价：">
            <el-input />
          </el-form-item>
          <el-form-item label="商品库存：">
            <el-input />
          </el-form-item>
          <el-form-item label="计量单位：">
            <el-input />
          </el-form-item>
          <el-form-item label="商品重量：">
            <el-input class="weightIpt" />
            <span>克</span>
          </el-form-item>
          <el-form-item label="排序">
            <el-input />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">下一步，填写商品促销</el-button>
          </el-form-item>
        </el-form>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  name: 'Hello',
});
// 校验规则
const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
});
</script>
<style lang="less" scoped>
.addProduct {
  .header {
    width: 100%;
    border-bottom: 1px solid #eee;
    .title {
      padding: 15px 20px;
    }
  }
  .addProduct_content {
    width: 800px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    :deep(.el-input .el-textarea__inner) {
      width: 480px;
    }
    .weightIpt {
      width: 300px;
    }
    :deep(.el-button) {
      margin: 0 auto;
      width: 180px;
      height: 40px;
      line-height: 40px;
    }
    .addFrom {
      margin-top: 60px;
    }
  }
}
</style>
